<template>
  <div class="breadcrumb">
    <div class="page-title">
      <el-breadcrumb class="breadcrumb-container" separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in list"
          :key="item.path + index"
          :to="item.path"
        >
          <span
            v-if="item.redirect === 'noRedirect' || index == list.length - 1"
            class="no-redirect"
            >{{ item.meta.title }}</span
          >
          <a v-else @click.prevent="handleLink(item)">
            <i v-if="item.name == 'Home'" class="el-icon-s-home"></i>
            <span v-else>
              {{ item.meta.title }}
            </span>
          </a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="grey"></div>
  </div>
</template>
<script>
export default {
  name: "BreadCrumbShow",
  props: {
    pageTitle: {
      type: String,
      default: "档案管理",
    },
  },
  data() {
    return {
      list: [],
    };
  },
  watch: {
    $route(to, from) {
      this.getBreadcrumb();
    },
  },
  mounted() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched;
      // const first = matched[0];
      // const last = matched[matched.length - 1];
      this.list = matched;
    },
    handleLink(item) {
      this.$router.push({ path: item.path === '' ? '/' : item.path });
    },
    detaillist(a, b) {
      if (b !== this.list.length - 1) {
        this.$emit("detaillist", { ...a, ...b });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.breadcrumb {
  .page-title {
    height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;

    .left-color {
      width: 5px;
      height: 26px;
      background-color: #f88023;
      margin: 0 20px 0 0;
    }

    h1 {
      font-size: 20px;
      font-family: MicrosoftYaHei-Bold;
      font-weight: bold;
      color: #333;
    }
  }
  .grey {
    height: 10px;
    width: calc(100% + 40px);
    background-color: #EFF1F5;
    margin: 0 -20px;
  }

  .breadcrumb-container.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 42px;
    // margin-left: 40px;

    .no-redirect {
      color: #f88023;
      cursor: text;
    }
  }

  // .el-breadcrumb {
  //   line-height: 20px;
  //   .el-breadcrumb__item {
  //     cursor: pointer;
  //     .el-breadcrumb__inner {
  //       color: #303133 !important;
  //       display: block;
  //       max-width: 100px;
  //       white-space: nowrap;
  //       overflow: hidden;
  //       text-overflow: ellipsis;
  //       float: left;
  //     }
  //   }
  //   .el-breadcrumb__item:last-child {
  //     cursor: default;
  //     .el-breadcrumb__inner {
  //       color: #97a8be !important;
  //     }
  //   }
  // }
}
</style>
